<template>
  <div>
    <el-descriptions class="descriptions">
      <el-descriptions-item label="订单编号：">{{
          form.id
        }}</el-descriptions-item>
      <el-descriptions-item label="运单编号：">--</el-descriptions-item>
      <el-descriptions-item label="下单时间：">{{
          form.estimatedArrivalTime
        }}</el-descriptions-item>
      <el-descriptions-item label="订单状态：">{{
          form.orderType === 1 ? "已取件" : "未取件"
        }}</el-descriptions-item>
      <el-descriptions-item label="预计到达日期：">{{
          form.createTime
        }}</el-descriptions-item>
    </el-descriptions>
    <el-collapse class="collapse">
      <el-collapse-item title="基本信息" class="jiben">
        <el-row>
          <el-col> <i class="el-icon-s-flag"></i><span>发货方</span> </el-col>
          <el-col :span="5">
            <div>
              发货方姓名
              <span>{{ form.senderName }}</span>
            </div>
            <div>
              发货方地址：
              <span
              >{{ form?.senderProvince?.name  }}{{ form?.senderCity?.name
                }}{{ form?.senderCounty?.name}}</span
              >
            </div>
          </el-col>
          <el-col :span="5">
            <div>
              发货方电话
              <span>{{ form.senderPhone }}</span>
            </div>
            <div>
              详细地址
              <span>{{ form.senderAddress }}</span>
            </div>
          </el-col>
          <el-col> <i class="el-icon-s-flag"></i><span>收货方</span> </el-col>
          <el-col :span="5">
            <div>
              收货方姓名
              <span>{{ form.receiverName}}</span>
            </div>
            <div>
              收货方地址
              <span
              >{{ form?.receiverProvince?.name  }}{{ form?.receiverCity?.name
                }}{{ form?.receiverCounty?.name  }}</span
              >
            </div>
          </el-col>
          <el-col :span="5">
            <div>
              收货方电话：
              <span>{{ form.receiverPhone }}</span>
            </div>
            <div>
              详细地址
              <span>{{ form.receiverAddress }}</span>
            </div>
          </el-col>
          <el-col> <i class="el-icon-s-flag"></i><span>距离</span> </el-col>
          <el-col :span="5">
            <div>
              备注
              <span>--</span>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="取件信息">
        <el-row style="font-size: 14px">
          <el-col :span="6">
            <i>所在网点：</i><span>皇姑区营业部</span>
          </el-col>
          <el-col :span="6">
            <i>取件类型：</i><span>皇姑区营业部</span>
          </el-col>
          <el-col :span="6">
            <i>作业状态：</i><span>皇姑区营业部</span>
          </el-col>
          <el-col :span="6">
            <i>取件快递员：</i><span>皇姑区营业部</span>
          </el-col>
          <el-col :span="6">
            <i>快递员电话：</i><span>皇姑区营业部</span>
          </el-col>
          <el-col :span="6">
            <i>预计取件时间：</i><span>皇姑区营业部</span>
          </el-col>
          <el-col :span="6">
            <i>取件完成时间：</i><span>皇姑区营业部</span>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="派送信息">
        <el-row>
          <el-col :span="8">
            <i>运费：</i>
            <span>18元</span>
          </el-col>
          <el-col :span="8">
            <i>支付方式：</i>
            <span>18元</span>
          </el-col>
          <el-col :span="8">
            <i> 付款状态：</i>
            <span>18元</span>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="费用信息">
        <el-table :data="tableData" border show-summary style="width: 100%">
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column prop="name" label="货品名称"> </el-table-column>
          <el-table-column prop="goodsType.name" label="货品类型">
          </el-table-column>
          <el-table-column prop="weight" label="重量（千克）">
          </el-table-column>
          <el-table-column prop="volume" label="体积（立方）">
          </el-table-column>
          <el-table-column prop="amount3" label="操作">
            <template #default="{}">
              <el-link type="warning">查看 | </el-link>
              <el-link type="danger"> 删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getorderInfoApi, getcargoApi } from "@/api/editorder";
export default {
  name:'editorder',
  data() {
    return {
      tableData: [{}],
      form: {},
    };
  },
  created() {
    this.getorderInfo();
    this.getcargo();
  },
  methods: {
    async getorderInfo() {
      const res = await getorderInfoApi(this.$route.query.id);
      this.form = res.data;
      console.log(this.form);
    },
    async getcargo() {
      const res = await getcargoApi({
        orderId: this.$route.query.id,
      });
      this.tableData = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.descriptions {
  width: 100%;
  height: 108px;
  background-color: #fff;
  padding: 25px 44px;
}
.collapse {
  .el-collapse-item {
    margin-top: 40px;
  .el-collapse-item__header {
      font-size: 16px;
      padding: 20px;
      height: 60px;
      font-weight: 700;
    }
 .el-collapse-item__wrap {
      padding: 24px 44px;
    }
  }
  .jiben {
    i {
      font-size: 14px;
      color: blue;
    }
    span {
      font-size: 16px;
      margin-left: 10px;
    }
  }
  .el-col.el-col-6 {
    font-size: 14px;
    margin-top: 10px;
  }
}
</style>
